<template>
  <div class="app-container">
    <el-card v-loading="loading">
      <div slot="header">
        <el-button type="primary" @click="resetForm()">返回</el-button>
      </div>
      <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="120px">
        <el-form-item label="入库时间" prop="">
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="formData.inTime" type="date" placeholder="入库时间"> </el-date-picker>
        </el-form-item>
        <el-form-item label="到货批次" prop="">
          <el-input v-model="formData.arrivalBatch" placeholder="到货批次" />
        </el-form-item>
        <el-form-item label="仓库" prop="">
          <el-select clearable v-model="formData.repositoryId" filterable placeholder="仓库">
            <el-option v-for="item in warehouseList" :key="item.value" :label="item.repositoryName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="采购订单" prop="">
          <el-select @change="change" clearable v-model="formData.procurementPlanId" filterable placeholder="采购订单">
            <el-option v-for="item in purchaseList" :key="item.value" :label="item.procurementPlanNo" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>


<!--        <el-col :span="24">-->
<!--          <div v-if="formData.materailDTOS.length"-->
<!--               v-for="(item,index) in formData.materailDTOS" :key="index">-->
<!--            <div style="display: flex;">-->
<!--              <el-form-item prop="materailBasicInfoId" label="物料编号,描述">-->
<!--                <el-col :span="6">-->
<!--                  <el-select style="width:500px" clearable v-model="item.materailBasicInfoId" filterable-->
<!--                             remote-->
<!--                             reserve-keyword-->
<!--                             :remote-method="queryMaterail"-->
<!--                             :loading="loading" placeholder="请输入物料编号">-->
<!--                    <el-option-->
<!--                      v-for="item1 in materiaOptions"-->
<!--                      :key="item1.value"-->
<!--                      :label="item1.materialNumber+'-&#45;&#45;'+item1.materialName"-->
<!--                      :value="item1.id">-->
<!--                    </el-option>-->
<!--                  </el-select>-->
<!--                </el-col>-->
<!--              </el-form-item>-->

<!--              <el-form-item prop="projectText" label="数量">-->
<!--                <el-col :span="24">-->
<!--                  <el-input v-model="item.purchaseQuantity" type="number" :rows="5"/>-->
<!--                </el-col>-->
<!--              </el-form-item>-->

<!--              <el-form-item label="工厂非限制库存" prop="notLimitStock">-->
<!--                <el-col :span="24">-->
<!--                  <el-input type="number" placeholder="工厂非限制库存" v-model="item.notLimitStock"/>-->
<!--                </el-col>-->
<!--              </el-form-item>-->
<!--              <el-form-item label="单价" prop="singlePrice">-->
<!--                <el-col :span="24">-->
<!--                  <el-input placeholder="单价" v-model="item.singlePrice"/>-->
<!--                </el-col>-->
<!--                <div style="display: flex;align-items: center;">-->
<!--                  <el-button v-if="formData.statusName == '新建'" @click="deleLine(index)" type="medium " size="" icon="el-icon-add">删除</el-button>-->
<!--                </div>-->
<!--              </el-form-item>-->
<!--            </div>-->
<!--          </div>-->
<!--        </el-col>-->


       <div v-if="formData.materailDTOS.length"
                 v-for="(item,index) in formData.materailDTOS" :key="index">
              <div style="display: flex;">
                <el-form-item prop="materailBasicInfoId" label="物料编号,描述">

                  <el-select clearable v-model="item.materailBasicInfoId" filterable
                             remote
                             reserve-keyword
                             :remote-method="queryMaterail"
                             :loading="loading" placeholder="请输入物料描述">
                    <el-option
                      v-for="item1 in materiaOptions"
                      :key="item1.value"
                      :label="item1.materialNumber+'---'+item1.materialName"
                      :value="item1.id">
                    </el-option>
                  </el-select>

                </el-form-item>

                <el-form-item prop="projectText" label="数量">

                    <el-input style="width: 100%;'" v-model="item.purchaseQuantity" type="number" :rows="5"/>

                </el-form-item>

                <el-form-item label="工厂非限制库存" prop="notLimitStock">

                    <el-input style="width: 100%;'" type="number" placeholder="工厂非限制库存" v-model="item.notLimitStock"/>

                </el-form-item>
                <el-form-item label="单价" prop="singlePrice">

                    <el-input style="width: 100%;'" placeholder="单价" v-model="item.singlePrice"/>

                </el-form-item>
                  <div>
                    <el-button v-if="formData.statusName == '新建'" @click="deleLine(index)" type="medium " size="" icon="el-icon-add">删除</el-button>
                  </div>
              </div>
       </div>
        <el-form-item v-if="formData.statusName == '新建'">
          <el-button @click="submitLine" type="primary" icon="el-icon-add">添加物料</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetForm">关闭</el-button>
          <el-button :loading="isAdd" type="primary" @click="submitForm('ruleForm')">
            <span v-if="isAdd">提交中...</span>
            <span v-else>提交</span>
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-dialog :visible.sync="visible" append-to-body width="33%">
      <p class="map">物料编号</p>
      <el-select clearable v-model="materailInfoValue" placeholder="请选择">
        <el-option
          v-for="item in materiaOptions"
          :key="item.value"
          :label="item.materialNumber"
          :value="item.id">
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button class="global-button" round type="primary" @click="submitLine">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { getMaterialAll } from '@/api/purchase.js'
import { warehousingDetail, submitWarehousingApply, modifyWarehousingApply,getPurchaseMaterialList,getPurchaseList,getWarehouseList } from '@/api/materialScience/warehousingApplication.js'
let $this = null
export default {
  name: 'submitForm',
  props: {
    subData: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      loading: false,
      isAdd: false,
      formData: {
        statusName: "新建",
        materailDTOS: []
      },
      queryInfo: {
        pageNo: 1,
        pageSize: 25,
        materialName: ""

      },
      rules: {},
      options: [],
      materailInfoValue: null,
      materiaOptions: [],
      visible: false,
      warehouseList: [],
      purchaseList: []
    }
  },
  created () {
    $this = this
    this.init()
    if ($this.subData.btnId == 1) {
      return $this.warehousingDetail()
    }
  },
  methods: {
    queryMaterail(queryWord) {
      this.materiaOptions = []
      this.queryInfo.materialName = queryWord
      getMaterialAll(this.queryInfo).then(res => {
        this.materiaOptions = res.data.data.records && res.data.data.records
      })
    },
    init () {
      getWarehouseList().then(res => {
        this.warehouseList = res.data.data
      })
      getPurchaseList().then(res => {
        this.purchaseList = res.data.data
      })
    },
    materailBasicInfoDetail () {
      $this.loading = true
      materailBasicInfoDetail($this.subData.id).then(res => {
        $this.loading = false
        $this.formData = res.data.data
      }).catch(err => { $this.loading = false })
    },
    change (e) {
      this.formData.materailDTOS = []
      this.materiaOptions = []
      if(!e) return;
      this.initGetMaterial(e)
    },
    deleLine (index) {
      this.formData.materailDTOS.splice(index,1)
    },
    submitLine () {
      // if(!this.materailInfoValue) {
      //   this.$message.warning("请选择物料编号")
      //   return
      // }
    this.visible = false
    this.formData.materailDTOS.push({
      materailBasicInfoId: null,
      purchaseQuantity: null,
      notLimitStock: null,
      singlePrice: null,
      materailNumber: null,
    })
    },
    // 获取物料编号
    initGetMaterial (id) {
      getPurchaseMaterialList(id).then(res => {
        this.materiaOptions = res.data.data && res.data.data
      })
    },
    // 详情
    warehousingDetail () {
      $this.loading = true
      warehousingDetail($this.subData.id).then(res => {
        $this.loading = false

        if (res.data.code != 200) {
          return $this.$message.error(res.data.message)
        }
        this.initGetMaterial(res.data.data.procurementPlanId)
        $this.formData = res.data.data
        this.formData.statusName = res.data.data.status.name
      }).catch(err => { $this.loading = false })
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          return $this.$message.error('请完善表单信息')
        }
        this.formData.statusName = null
        if ($this.subData.btnId == 0) {
          $this.isAdd = true
          submitWarehousingApply($this.formData).then(res => {
            $this.isAdd = false
            if (res.data.code != 200) {
              return $this.$message.error(res.data.message)
            }
            $this.$emit('refresh')
          }).catch(err => { $this.isAdd = false })
        }
        if ($this.subData.btnId == 1) {
          $this.isAdd = true
          modifyWarehousingApply($this.formData).then(res => {
            $this.isAdd = false
            if (res.data.code != 200) {
              return $this.$message.error(res.data.message)
            }
            $this.$emit('refresh')
          }).catch(err => { $this.isAdd = false })
        }
      })
    },
    resetForm () {
      $this.$emit('closeView')
    }
  }
}
</script>

<style scoped lang="scss">
  .el-input {
    width: 500px;
  }
</style>
